import 'package:flutter/material.dart';
import 'package:xbaistack/widget/form/formx_widget.dart';
import 'package:xbaistack/widget/form/formx_inputs.dart';
import 'package:xbaistack/widget/form/formx_validator.dart';
import 'package:xbaistack/widget/form/core/formx.dart';
import 'package:xbaistack/widget/form/fields/formx_field_text.dart';

/// Converter 和 Renderer 使用示例
/// 
/// 这个示例展示了如何在自定义FormXField中使用converter和renderer
class ConverterRendererExample extends StatelessWidget {
  final FormController controller = FormController();

  ConverterRendererExample({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Converter & Renderer 示例'),
        actions: [
          TextButton(
            onPressed: () {
              if (controller.validate()) {
                final values = controller.getValue();
                print('表单值: $values');
                ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(content: Text('表单值: $values')),
                );
              }
            },
            child: const Text('提交', style: TextStyle(color: Colors.white)),
          ),
        ],
      ),
      body: FormInput(
        controller: controller,
        validateOnInput: true,
        showErrors: true,
        children: [
          // 示例1: 自定义价格字段 - 演示converter和renderer
          Input.builder(
            builder: (context, parent, index) => PriceField(
              name: 'price',
              label: '商品价格',
              placeholder: '请输入价格',
              required: true,
            ),
          ),

          Input.spacer(),

          // 示例2: 自定义年龄字段
          Input.builder(
            builder: (context, parent, index) => AgeField(
              name: 'age',
              label: '年龄',
              placeholder: '请输入年龄',
              required: true,
            ),
          ),

          Input.spacer(),

          // 示例3: 普通文本输入（对比）
          Input.text(
            name: 'name',
            label: '姓名',
            placeholder: '请输入姓名',
            required: true,
            validator: [Validator.required<String>()],
          ),

          Input.spacer(height: 20),

          // 显示当前表单的值
          Input.builder(
            builder: (context, parent, index) {
              return Container(
                padding: const EdgeInsets.all(12),
                decoration: BoxDecoration(
                  color: Colors.grey[100],
                  borderRadius: BorderRadius.circular(8),
                ),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    const Text(
                      '实时数据预览:',
                      style: TextStyle(fontWeight: FontWeight.bold),
                    ),
                    const SizedBox(height: 8),
                    Text('价格原始值: ${controller.getRawValueBy('price') ?? '(空)'}'),
                    Text('价格转换值: ${controller.getValueBy('price') ?? '(空)'}'),
                    const SizedBox(height: 4),
                    Text('年龄原始值: ${controller.getRawValueBy('age') ?? '(空)'}'),
                    Text('年龄转换值: ${controller.getValueBy('age') ?? '(空)'}'),
                    const SizedBox(height: 4),
                    Text('姓名值: ${controller.getRawValueBy('name') ?? '(空)'}'),
                  ],
                ),
              );
            },
          ),
        ],
      ),
    );
  }
}

/// 自定义价格字段 - 演示 converter 和 renderer 的使用
/// 
/// FormXFieldText<double>: 外部接口类型是double，内部流转类型是String
/// converter: double -> String (外部double值转换为内部String)
/// transformer: String -> double (内部String转换为提交的double)
/// renderer: String -> String (内部String转换为显示字符串)
class PriceField extends FormXFieldText<double> {
  PriceField({
    Key? key,
    required String name,
    required String label,
    String? placeholder,
    bool required = false,
  }) : super(
          key: key,
          name: name,
          label: label,
          placeholder: placeholder,
          required: required,
          // converter: 将外部double值转换为内部使用的String
          converter: _doubleToString,
          // transformer: 将内部String转换为提交给服务端的double
          transformer: _stringToDouble,
          // renderer: 将内部String转换为显示用的字符串
          renderer: _stringToDisplayString,
          validator: [
            Validator.required<String>(),
          ],
        );

  // converter: double -> String (外部值转内部值)
  static String? _doubleToString(double? input) {
    if (input == null) return null;
    return input.toString();
  }

  // transformer: String -> double (内部值转提交值)
  static double? _stringToDouble(String? value) {
    if (value == null || value.isEmpty) return null;
    return double.tryParse(value);
  }

  // renderer: String -> String (内部值转显示值)
  static String? _stringToDisplayString(String? value) {
    if (value == null || value.isEmpty) return null;
    final doubleValue = double.tryParse(value);
    if (doubleValue == null) return value;
    return '¥${doubleValue.toStringAsFixed(2)}';
  }
}

/// 自定义年龄字段 - 演示 converter 和 transformer 的使用
/// 
/// FormXFieldText<int>: 外部接口类型是int，内部流转类型是String
/// converter: int -> String (外部int值转换为内部String)
/// transformer: String -> int (内部String转换为提交的int)
/// renderer: String -> String (内部String转换为显示字符串)
class AgeField extends FormXFieldText<int> {
  AgeField({
    Key? key,
    required String name,
    required String label,
    String? placeholder,
    bool required = false,
  }) : super(
          key: key,
          name: name,
          label: label,
          placeholder: placeholder,
          required: required,
          // converter: 将外部int值转换为内部使用的String
          converter: _intToString,
          // transformer: 将内部String转换为提交给服务端的int
          transformer: _stringToInt,
          // renderer: 将内部String转换为显示用的字符串
          renderer: _stringToDisplayString,
          validator: [
            Validator.required<String>(),
          ],
        );

  // converter: int -> String (外部值转内部值)
  static String? _intToString(int? input) {
    if (input == null) return null;
    return input.toString();
  }

  // transformer: String -> int (内部值转提交值)
  static int? _stringToInt(String? value) {
    if (value == null || value.isEmpty) return null;
    final age = int.tryParse(value);
    if (age != null && age >= 0 && age <= 150) {
      return age;
    }
    return null; // 无效年龄返回null
  }

  // renderer: String -> String (内部值转显示值)
  static String? _stringToDisplayString(String? value) {
    if (value == null || value.isEmpty) return null;
    final intValue = int.tryParse(value);
    if (intValue == null) return value;
    return '$intValue岁';
  }
}

/// 使用说明和概念解释:
/// 
/// 1. **converter (转换器)**:
///    - 类型: FieldTransformer<OUT, IN>
///    - 作用: 将外部输入的数据类型(OUT)转换为组件内部使用的数据类型(IN)
///    - 时机: 当用户输入数据或设置初始值时自动调用
///    - 示例: 用户输入字符串"100.50" -> converter -> 内部存储double 100.5
/// 
/// 2. **transformer (变换器)**:
///    - 类型: FieldTransformer<IN, OUT>
///    - 作用: 将内部数据类型(IN)转换为提交给服务端的数据类型(OUT)
///    - 时机: 当调用getValue()、save()或表单提交时调用
///    - 示例: 内部存储int 25 -> transformer -> 提交字符串"25"
/// 
/// 3. **renderer (渲染器)**:
///    - 类型: FieldTransformer<IN, String>
///    - 作用: 将内部数据类型(IN)转换为用于显示的字符串
///    - 时机: 在只读模式(readOnly=true)下显示值时调用
///    - 示例: 内部存储double 100.5 -> renderer -> 显示"¥100.50"
/// 
/// **数据流向图**:
/// ```
/// 用户输入(OUT) --converter--> 内部存储(IN) --transformer--> 服务端提交(OUT)
///                                    |
///                                    +--renderer--> 只读显示(String)
/// ```
/// 
/// **泛型说明**:
/// - FormXField<W, IN, OUT>:
///   - W: 当前字段类型(自引用)
///   - IN: 内部流转的数据类型
///   - OUT: 外部接口的数据类型
/// 
/// **实际应用场景**:
/// - 价格输入: 用户输入字符串 <-> 内部存储数字 <-> 服务端提交数字
/// - 日期选择: 用户选择DateTime <-> 内部存储DateTime <-> 服务端提交时间戳
/// - 枚举选择: 用户选择对象 <-> 内部存储枚举 <-> 服务端提交字符串ID
/// - 文件上传: 用户选择File <-> 内部存储File <-> 服务端提交base64字符串